<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      position: relative;
    }

    .sendly {
      padding-top: 30px;
      text-align: center;
      width: 500px;
      height: 200px;
      border: 1px solid rgb(17, 14, 14);
      position: absolute;
      top: 50px;
      left: 500px;
      background: wheat;
      display: none;
    }
  </style>
  <body>
    <button id="sendly">发布留言</button>
    <table border="1">
      <thead>
        <tr>
          <th>ID</th>
          <th>标题</th>
          <th>留言人</th>
          <th>内容</th>
          <th>时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <div class="sendly">
      标题：<input type="text" id="tit" /><br />
      内容：<input type="text" id="con" /> <br />
      留言人：<input type="text" id="username" /> <br />

      <button id="send">发布</button><button id="off">关闭</button>
    </div>
  </body>
  <script>
    window.onload = function () {
      getData() //获取留言列表
      sendly.onclick = function () {
        document.getElementsByClassName('sendly')[0].style.display = 'block'
      }
      off.onclick = function () {
        document.getElementsByClassName('sendly')[0].style.display = 'none'
      }
      send.onclick = function () {
        var title = document.getElementById('tit').value,
          con = document.getElementById('con').value,
          username = document.getElementById('username').value
        if (!title || !con || !username) {
          alert('输入内容不正确')
          return
        }
        var data = {
          title: title,
          content: con,
          name: username,
        }
        xmlHttp(
          'POST',
          'https://liu.zzgoodqc.cn/lyb/add',
          data,
          function (res) {
            console.log(res)
            if (res.code == 200 && res.msg == 'success') {
              getData()
              setTimeout(() => {
                document.getElementsByClassName('sendly')[0].style.display =
                  'none'
              }, 2000)
            }
          }
        )
      }
    }
    function del(id) {
      xmlHttp('GET', 'https://liu.zzgoodqc.cn/del/' + id, '', function (res) {
        if (res.code == '200') {
          getData()
        } else {
          alert('删除失败' + res.msg)
        }
      })
    }
    //获取留言列表
    function getData() {
      var data = xmlHttp(
        'GET',
        'https://liu.zzgoodqc.cn/lyb',
        '',
        function (res) {
          console.log(res)
          if (res.code == 200) {
            var strHtml = ''
            for (i = res.data.length - 1; i >= 0; i--) {
              strHtml += `<tr>
                        <td>${res.data[i].id}</td>
                        <td>${res.data[i].title}</td>
                        <td>${res.data[i].name}</td>
                        <td>${res.data[i].content}</td>
                        <td>${res.data[i].created_at}</td>
                        <td><button onclick=del(${res.data[i].id})>删除</button></td>
                     </tr>`
            }
            document.getElementsByTagName('tbody')[0].innerHTML = strHtml
          } else {
            alert('获取留言列表失败')
          }
        }
      )
    }
    //封装请求
    function xmlHttp(method, url, data = '', fn) {
      var xmlHttp = new XMLHttpRequest()
      xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
          fn(JSON.parse(xmlHttp.responseText))
        }
      }
      xmlHttp.open(method, url)
      if (method == 'POST') {
        xmlHttp.setRequestHeader(
          'content-type',
          'application/x-www-form-urlencoded'
        )
        var keys = Object.keys(data),
          vals = Object.values(data)
        var strData = ''
        for (let i in keys) {
          strData += keys[i] + '=' + vals[i] + '&'
        }
        xmlHttp.send(strData)
      } else {
        xmlHttp.send()
      }
    }
  </script>
</html>
